<template>
  <div class="com-file">
    <div
      v-for="(f, i) in folders"
      :key="f[value] || i"
      :class="{'child': curLevel > 1, actived: selectPath && selectPath.indexOf(f[value]) > -1}"
    >
      <template v-if="curLevel < showLevel">
        <div class="container" @click="folderSelect(f)">
          <span style="flex-shrink: 0" @click.stop="openFolder(f)">
            <i :class="{'el-icon-minus': f.isOpen, 'el-icon-plus': !f.isOpen}" class="icon"></i>
            <i class="el-icon-folder-opened icon"></i>
          </span>
          <span class="title">{{ f[name] }}</span>
        </div>
        <template v-if="f.isOpen">
          <div v-if="f.children.length === 0" style="padding-left: 20px;">无数据...</div>
          <div v-else>
            <c-file
              :value="value"
              :folders="f.children"
              :name="name"
              :parent-level="curLevel"
              :parent-path="parentPath.concat(f[value])"
              :select-path="selectPath"
              @folder-select="$emit('folder-select', $event)"
              @file-select="$emit('file-select', $event)"
            />
          </div>
        </template>
      </template>
      <template v-else>
        <div class="container" @click="fileSelect(f)">
          <i class="el-icon-tickets icon"></i>
          <span class="title">{{ f[name] }}</span>
        </div>
      </template>
    </div>
  </div>
</template>

<script>
export default {
  name: "CFile",
  props: {
    folders: {
      type: Array,
      required: true
    },
    activeId: {
      type: Number,
      default: null
    },
    parentLevel: {
      type: Number,
      default: 0
    },
    selectPath: {
      type: Array,
      default: null
    },
    parentPath: {
      type: Array,
      default() {
        return [];
      }
    },
    value: {
      type: String,
      default: "id"
    },
    name: {
      type: String,
      default: "name"
    },
    showLevel: {
      type: Number,
      default: 3
    }
  },
  data() {
    return {
      curLevel: this.parentLevel + 1
    };
  },
  created() {
    if (this.selectPath) {
      this.folders.forEach(f => {
        if (this.selectPath.indexOf(f[this.value]) > -1) {
          this.$set(f, "isOpen", true);
        }
      });
    }
  },
  methods: {
    openFolder(f) {
      console.log("123")
      this.$set(f, "isOpen", !f.isOpen);
    },
    // foldAction(e) {
    //   const p = { action: e.action, ...this.folder };
    //   this.$emit("folderAction", p);
    // },
    // fileAction(e, f) {
    //   const p = { action: e.action, ...f };
    //   this.$emit("fileAction", p);
    // },
    folderSelect(f) {
      console.log("23")
      this.$set(f, "isOpen", !f.isOpen);
      this.$emit("folder-select", [...this.parentPath, f[this.value]]);
    },
    fileSelect(f) {
      this.$emit("file-select", [...this.parentPath, f[this.value]]);
    }
  }
};
</script>

<style lang="scss" scoped>
@import "~@/styles/mixin.scss";
.container {
  color: #7c8ca5;
  height: 40px;
  display: flex;
  align-items: center;
  font-size: 16px;
  padding: 0 6px;
  cursor: pointer;
  .icon {
    margin-right: 6px;
  }
  .title {
    flex-grow: 1;
    @include text-one-line;
  }
}
.actived > .container {
  color: #fff;
}
.child {
  padding-left: 20px;
}
.file {
  height: 24px;
  line-height: 24px;
  text-align: left;
  padding: 0 30px;
  cursor: pointer;
  &.active {
    background: #0f3a54;
  }
}
</style>
